<style lang="less">
    @import './login.less';
</style>

<template>
    <div class="login" @keydown.enter="handleSubmit">
        <div class="login-con">
            <Card :bordered="false">
                <p slot="title">
                    <Icon type="log-in"></Icon>
                    欢迎登录
                </p>
                <div class="form-con">
                    <i-Form ref="loginForm" :model="form" :rules="rules">
                        <FormItem prop="userName">
                            <i-Input v-model="form.userName" placeholder="请输入用户名">
                                <span slot="prepend">
                                    <Icon :size="16" type="person"></Icon>
                                </span>
                            </i-Input>
                        </FormItem>
                        <FormItem prop="password">
                            <i-Input type="password" v-model="form.password" placeholder="请输入密码">
                                <span slot="prepend">
                                    <Icon :size="14" type="locked"></Icon>
                                </span>
                            </i-Input>
                        </FormItem>
                        <FormItem prop="code">
                            <Row>
                                <i-Col span="12">
                                <i-Input v-model="form.code" placeholder="请输入验证码">
                                    <span slot="prepend">
                                        <Icon :size="14" type="ios-ionic-outline"></Icon>
                                    </span>
                                </i-Input>
                                </i-Col>
                                <i-Col span="12"><img v-on:click="changeCode" :src="codeimg" alt="验证码"></i-Col>
                            </Row>
                        </FormItem>
                        <FormItem>
                            <Button @click="handleSubmit" type="primary" long>登录</Button>
                        </FormItem>
                    </i-Form>
                    <p class="login-tip" v-show="tip">请输入用户名和密码</p>
                    <p class="login-error" v-show="error" color="red">{{errormsg}}</p>
                </div>
            </Card>
        </div>
        <div style="text-align:center;color:#ccc;font-size:11px;clear:both;position:fixed;bottom:10px;left:0;right:0;margin:0 auto;"></div>
    </div>
</template>

<script>
import Cookies from 'js-cookie';
import api from '../libs/api';
export default {
    data () {
        return {
            errormsg:"",
            tip:true,
            error:false,     
            codeimg:wlfData.serverurl+ '/code?w=120&h=30',
            form: {
                userName: 'admin',
                password: '',
                code:''
            },
            rules: {
                userName: [
                    { required: true, message: '账号不能为空', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '密码不能为空', trigger: 'blur' }
                ]                ,
                code: [
                    { required: true, message: '验证码不能为空', trigger: 'blur' }
                ]
            }
        };
    },
    methods: {
        changeCode(){
            this.codeimg=wlfData.serverurl+ '/code?w=120&h=30&t='+Date.now();
        },
        handleSubmit () {
            this.$refs.loginForm.validate((valid) => {
                
                if (valid) {
                    var vm=this;
                    var model={"username": this.form.userName,"password":this.form.password,"code":this.form.code,'saveName':false};
                    api.post("/login/in",model).then(function(response){
                        if(response.data.code==200){
                            vm.tip=false;
                            vm.error=true;
                            vm.errormsg="登录成功！";
                            wlfData.userinfo=response.data.msg;
                            Cookies.set('user',  vm.form.userName);
                            Cookies.set('userinfo', response.data.msg);
                            vm.$store.commit('setAvator', 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3448484253,3685836170&fm=27&gp=0.jpg');
                            vm.$router.push({
                                name: 'home_index'
                            });
                        }
                        else{
                            vm.tip=false;
                            vm.error=true;
                            vm.errormsg=response.data.msg;
                            setTimeout(function(){vm.tip=true;vm.error=false;},3000);
                        }
                    })
                }
            });
        }
    },
    created(){
    }
};
</script>

<style>

</style>
